<template>
  <div>
    <el-row class="my-main">
      <temperature class="my-components" />
      <humidity class="my-components" />
      <air-quality class="my-components" />
      <light-sensor class="my-components" />
    </el-row>
  </div>
</template>

<script>
import Temperature from '@/views/Data/components/Temperature'
import Humidity from '@/views/Data/components/Humidity'
import AirQuality from '@/views/Data/components/AirQuality'
import LightSensor from '@/views/Data/components/LightSensor'

export default {
  name: "Index",
  components: {
    temperature: Temperature,
    humidity: Humidity,
    airQuality: AirQuality,
    lightSensor: LightSensor,
  }
}
</script>

<style scoped>
.my-components {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.my-main {
  background-color: #DCDFE6;
  height: 100%;
  padding: 10px;
  margin-bottom: 50px;
}
</style>
